<template>
    <div>
        <el-dialog title="新建线索" width="900px" :visible.sync="dialogVisible">
            <el-form ref="ruleForm" :model="form" :rules="rules" label-width="110px">
                <el-row>
                    <el-collapse v-model="activeNames">
                        <el-collapse-item title="基础信息" name="1">
                            <el-col :span="12">
                                <el-form-item prop="name" label="线索名称">
                                    <el-input v-model="form.name" type="text" placeholder="请输入" style="width: 100%;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="phone" label="手机号码">
                                    <el-input v-model="form.phone" type="text" placeholder="请输入" style="width: 100%;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="性别">
                                    <el-select v-model="form.sex" placeholder="请选择" style="width: 100%;">
                                        <el-option label="男" value="1" />
                                        <el-option label="女" value="2" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="年龄">
                                    <el-input v-model="form.age" type="text" placeholder="请输入" style="width: 100%;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="省市区">
                                    <cascader-area v-model="area" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="地址">
                                    <el-input v-model="form.address" type="text" placeholder="请输入" style="width: 100%;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="from" label="来源渠道">
                                    <el-select v-model="form.from" placeholder="请选择" style="width: 100%;">
                                        <el-option v-for="item, index in dict.from_list" :key="index" :label="item.name" :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="level" label="线索等级">
                                    <el-select v-model="form.level" placeholder="请选择" style="width: 100%;">
                                        <el-option v-for="item, index in dict.levelList" :key="index" :label="item.name" :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="pool" label="线索池">
                                    <el-select v-model="form.pool" placeholder="请选择" style="width: 100%;">
                                        <el-option v-for="item, index in dict.poolList" :key="index" :label="item.name" :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="标签">
                                    <el-tag v-for="(item, index) in selectTages" :key="index" class="tag-item">{{ item.name }}</el-tag>
                                    <el-button size="small" @click="tag">+ 设置</el-button>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="12">
                                <el-form-item label="备注">
                                    <el-input v-model="form.name" type="text" placeholder="请输入" style="width: 100%;" />
                                </el-form-item>
                            </el-col> -->
                        </el-collapse-item>
                        <el-collapse-item title="附加信息" name="2">
                            <el-col :span="12">
                                <el-form-item label="投放产品">
                                    <el-select v-model="form.use_product" placeholder="请选择" style="width: 100%;">
                                        <el-option v-for="item, index in dict.productList" :key="index" :label="item.name" :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="贷款额度">
                                    <el-input v-model="form.use_money" type="text" placeholder="请输入" style="width: 100%;">
                                        <template slot="append">万元</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="12">
                                <el-form-item label="是否有房">
                                    <el-select v-model="form.house_has_loan" placeholder="请选择" style="width: 100%;">
                                        <el-option label="是" value="1" />
                                        <el-option label="否" value="0" />
                                    </el-select>
                                </el-form-item>
                            </el-col> -->
                            <!-- <el-col :span="12">
                                <el-form-item label="发薪方式">
                                    <el-input v-model="form.name" type="text" placeholder="请输入" style="width: 100%;" />
                                </el-form-item>
                            </el-col> -->
                            <el-col :span="12">
                                <el-form-item label="房产类型">
                                    <el-select v-model="form.house_type" placeholder="请选择" style="width: 100%;">
                                        <el-option v-for="item, index in dict.houseTypeList" :key="index" :label="item.name" :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="抵押情况">
                                    <el-select v-model="form.house_has_loan" placeholder="请选择" style="width: 100%;">
                                        <el-option v-for="item, index in dict.houseLoanList" :key="index" :label="item.name" :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="房产信息">
                                    <el-select v-model="form.house_msg" placeholder="请选择" style="width: 100%;">
                                        <el-option v-for="item, index in dict.houseMsgList" :key="index" :label="item.name" :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="房屋面积">
                                    <el-input v-model="form.house_area" type="text" placeholder="请输入" append="平方米" style="width: 100%;">
                                        <template slot="append">平方米</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="房屋位置">
                                    <el-input v-model="form.house_address" type="text" placeholder="请输入" style="width: 100%;" />
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="12">
                                <el-form-item label="房最新评估价">
                                    <el-input v-model="form.house_price" type="text" placeholder="请输入" style="width: 100%;" />
                                </el-form-item>
                            </el-col> -->
                        </el-collapse-item>
                    </el-collapse>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 标签设置 -->
        <tag-dialog ref="userTag" @success="setTag" />
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { createUser } from '@/api/clue'
import TagDialog from './TagDialog'
export default {
    name: 'UserAddDialog',
    components: {
        TagDialog
    },
    data() {
        return {
            dialogVisible: false,
            activeNames: ['1'],
            area: [],
            selectTages: [],
            form: {},
            rules: {
                name: [{ required: true, message: '请输入线索名称', trigger: 'change' }],
                phone: [{ required: true, message: '请输入手机号码', trigger: 'change' }],
                from: [{ required: true, message: '请选择来源渠道', trigger: 'change' }],
                level: [{ required: true, message: '请选择线索等级', trigger: 'change' }],
                pool: [{ required: true, message: '请选择线索池', trigger: 'change' }]
            }
        }
    },
    computed: {
        ...mapState(["dict"])
    },
    watch: {
        area(val) {
            this.form.prov = val[0] || null;
            this.form.city = val[1] || null;
            this.form.area = val[2] || null;
        }
    },
    methods: {
        showDialog(record) {
            // this.resetParams();
            this.resetForm();
            this.dialogVisible = true;
        },
        // 批量标签设置
        tag() {
            this.$refs.userTag.showDialog();
        },
        setTag(list) {
            this.selectTages = list;
        },
        resetForm() {
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields();
            })
        },
        resetParams() {
            this.form = {}
            this.selectTages = []
        },
        handleSubmit(e) {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    let selectTags = this.selectTages.map(item => {
                        return item.id
                    })
                    this.form.tag = selectTags.join(',');
                    createUser(this.form).then(res => {
                        if (res.status == '1') {
                            this.$message.success(this.title + '成功！')
                            this.$emit('success', res)
                        } else {
                            this.$message.error(res.message)
                        }
                    }).finally(() => {
                        this.dialogVisible = false
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.tag-item {
    margin-right: 5px;
}
</style>